<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
                               鼠标事件默认采取冒泡形式
         mouseenter(不冒泡)
         mouseleave(不冒泡)
         mouseover（冒泡） 	
         mouseout（冒泡）
			
		 click鼠标单击事件
		 dblclick鼠标的双击事件
		 mousedown鼠标按下时触发 
		 mouseup鼠标抬起时触发
		 mousemove鼠标移动时触发
		 
			
		-->
		<style type="text/css">
		.box{
			margin: 100px auto;
			width: 500px;
			height: 300px;
			border: 1px solid aqua;
			position: relative;
		}
		#btn{
			width: 300px;
            display: block;
            position: absolute;
            top: 50px;
		}
		.innerNumber{
			display: inline-block;
			width: 23px;
			height: 20px;
			text-align: center;
			line-height: 20px;
			border: 1px solid red;
			font-size: 12px;
			position: absolute;
			display: none;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<span class="innerNumber">123</span>
			<input id="btn" type="range" min='0' max='100'/>
		</div>
		<script type="text/javascript">
         var btn=document.getElementById('btn');
         var innerNumber=document.getElementsByClassName('innerNumber')[0];
         
         btn.onmousedown=function(){
         	var L=event.clientX;
         	var l= document.documentElement.clientHeight+88;
         	innerNumber.style.left=L-l+'px';
         	innerNumber.style.display='block';
         	innerNumber.innerHTML=btn.value;
         }
         
         btn.onmousemove=function(){
         	
         	var L=event.clientX;
         	var l= document.documentElement.clientHeight+88;
         	var temp=L-l;
         	if(temp<-12){
         		temp=-12+'px'
         	}
         	if(temp>287){
         		temp=287+'px'
         	}
         	innerNumber.style.left=temp+'px';
         	innerNumber.innerHTML=btn.value;
         	
         }






















/*
 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * */
		</script>
	</body>

</html>
